使用v-on指令可以偵聽DOM 事件，並執行後續方法

下面例子在button上bind click事件，在click時改變資料(將原先定義好的counter + 1)

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

或直接綁定methods的function，改寫上面例子如下：

<div id="example-1">
  <button v-on:click="add">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

把原先的動作包成名叫add的function定義在methods項下，並在click時調用他

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  },
  methods:{
    add: function(){
      counter +=1;
    }
    //或寫這樣
    //add(){
    //  counter += 1;
    //}
  }
})

事件

DOM事件還有其他如：mouseover, mouseleave, keydown, keyup....等等。
詳細清單可以參考HTML DOM Event Object
一樣接在v-on後：

<button v-on:mouseover=""></button>
<button v-on:mouseleave=""></button>

縮寫

v-on也可以寫成@：

<button v-on:click="add"></button> <!--完整-->
<button @click="add"></button>      <!--縮寫-->

縮寫-> @click

修飾符

Vue在事件、滑鼠與鍵盤監聽的處理上有提供修飾符，讓我們可以在做事件處理時能讓操作更加簡化，不用在function裡在去處理DOM事件細節。
以下如官方文件所列：

事件修飾符(Event Modifiers)

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

實際寫專案的時候常遇到click事件冒泡的問題，這時候都要在function內加上event.preventDefault();，用Vue的話直接@click.prevent就解決了，是不是很方便！

按鍵修飾符(Key Modifiers)

• .enter
• .tab
• .delete( delete/backspace )
• .esc
• .space
• .up
• .down
• .left
• .right

滑鼠按鈕修飾符(Mouse Button Modifiers)

• .left
• .right
• .middle

以上v-on偵聽事件的學習，看官方文件還有好多細節，以後應該會慢慢碰到，下篇開始結合以上指令做一個小練習